<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            分配设备
            <small>为教室分配设备</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-gears"></i> 设备管理</a></li>
            <li>编辑设备</li>
            <li>分配设备</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">教室列表</h3>
                        <a class="btn btn-warning btn-flat pull-right" routerLink="/assignDeviceClassroom">分配教室</a>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="example2" class="table table-bordered table-hover" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
                            <thead>
                            <tr>
                                <th><mfDefaultSorter by="id">编号</mfDefaultSorter></th>
                                <th><mfDefaultSorter by="buildingNum">教室</mfDefaultSorter></th>
                                <th>电脑</th>
                                <th>摄像头</th>
                                <th>投影仪</th>
                                <th>树莓派</th>
                                <th>单片机</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let device of mf.data">
                                    <td>{{device.id}}</td>
                                    <td>{{device.buildingNum}} {{device.classroomNum}}</td>
                                    <td>类型：{{device.computerType.computerTypeName}} <br/>
                                        内存：{{device.computerType.memorySize}}G  &nbsp; 硬盘：{{device.computerType.diskSize}}G<br/>
                                        操作系统：{{device.computerType.operatingSystem}}</td>
                                    <td><p *ngFor="let camera of device.cameraList">{{camera.cameraAngle}}：{{camera.cameraTypeName}}</p></td>
                                    <td>{{device.projectorType.projectorTypeName}}</td>
                                    <td>
                                        类型：{{device.raspberryType.raspberryTypeName}}<br/>
                                            <div *ngIf="device.raspberryStreamStatus==0" >
                                                状态：离线
                                                <span class="label label-success cursor-hand" (click)="openRaspberry(device.id)">开启</span>
                                            </div>
                                            <p *ngIf="device.raspberryStreamStatus==1" >状态：在线(空闲)</p>
                                            <div *ngIf="device.raspberryStreamStatus==2" >
                                                状态：异常
                                                <span class="label label-success cursor-hand" (click)="openRaspberry(device.id)">开启</span>
                                            </div>
                                            <p *ngIf="device.raspberryStreamStatus==3" >状态：正在推流</p>
                                            <p *ngIf="device.raspberryStreamStatus==4" >状态：正在拉流</p>
                                            <p *ngIf="device.raspberryStreamStatus==5" >状态：正在广播</p>
                                    </td>
                                    <td>{{device.singlechipType.singlechipTypeName}}</td>
                                    <td>
                                        <a class="label label-success cursor-hand" [routerLink]="['/assignDeviceClassroom',{id: device.id}]"> 修改 </a>
                                        &nbsp;
                                        <span class="label label-danger cursor-hand" data-toggle="modal" data-target="#deleteModal" (click)="getDeviceClassroomId(device.id)"> 删除 </span>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7">
                                        <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->


<!--模态框删除-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="deleteModalLabel">删除教室</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal" role="form">

                    <div class="fcol-sm-5 ">
                        <p>确定要删除本教室吗？</p>

                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <p class="label label-danger delete-wrong-tip" [ngClass]="{'div-display': judgeTip}" style="margin-top: 5px;float: left;" >{{tip}}</p>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" (click)="deleteDeviceClassroom()">删除</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->